/* eslint-disable @typescript-eslint/no-use-before-define */
import IconFont from "@/components/IconFont";
import TreeTable from "@/components/TreeTable";
// import organize from "@/services/api/org/organize";
// import role from "@/services/api/org/role";
import { DrawerForm, Key } from "@ant-design/pro-components";
import { Card, Col, Drawer, Form, Input, List, Modal, Radio, Row, Space, Typography } from "antd";
import React, { useEffect, useState } from "react";
const { Search } = Input;
export type FormValueType = any & Partial<API.Setting.Role>;
import TreeTableList from "@/components/TreeTableList/TreeTableList";
export type DataScopeFormProps = {
	onCancel: (flag?: boolean, formVals?: FormValueType) => void;
	onSubmit: (values: FormValueType) => Promise<void>;
	open: boolean;
	idValue: number | undefined;
	deptCheckedKeys: string[];
};

const menuData = [
	{
		label: "首页",
		value: "HOME"
	},
	{
		label: "商户管理",
		value: "MERCHANT",
		children: [
			{
				label: "商户查询",
				value: "MERCHANT_LIST",
				children: [
					{
						label: "商户查询",
						value: "MERCHANT_QUERY"
					},
					{
						label: "查看商户详情",
						value: "MERCHANT_DETAIL"
					},
					{
						label: "新增商户",
						value: "MERCHANT_ADD"
					}
				]
			}
		]
	},
	{
		label: "交易管理",
		value: "TRADE",
		children: [
			{
				label: "交易查询",
				value: "TRADE_LIST",
				children: [
					{
						label: "交易查询",
						value: "TRADE_QUERY"
					},
					{
						label: "交易详情",
						value: "TRADE_DETAIL"
					}
				]
			}
		]
	},
	{
		label: "风控管理",
		value: "RISK",
		children: [
			{
				value: "RISK_LIST",
				label: "风控记录查询",
				children: [
					{
						value: "RISK_QUERY",
						label: "风控记录查询"
					},
					{
						value: "RISK_DETAIL",
						label: "查看商户详情"
					},
					{
						value: "RISK_ADD",
						label: "新增商户处罚管理"
					}
				]
			}
		]
	},
	{
		label: "对账管理",
		value: "RECON",
		children: [
			{
				value: "RECON_OPERATION",
				label: "运营机构对账",
				children: [
					{
						value: "RECON_OPERATION_QUERY",
						label: "对账记录查询"
					}
				]
			}
		]
	},
	{
		label: "运营平台管理",
		value: "OPERATION",
		children: [
			{
				value: "OPERATION_ROLE",
				label: "角色管理",
				children: [
					{
						value: "OPERATION_ROLE_ADD",
						label: "新增角色"
					},
					{
						value: "OPERATION_ROLE_UPDATE",
						label: "修改角色"
					},
					{
						value: "OPERATION_ROLE_QUERY",
						label: "查询角色列表",
						disabled: true
					}
				]
			},
			{
				value: "OPERATION_ACCOUNT",
				label: "账号管理",
				children: [
					{
						value: "OPERATION_ACCOUNT_QUERY",
						label: "账号查询"
					},
					{
						value: "OPERATION_ACCOUNT_ADD",
						label: "新增账号"
					},
					{
						value: "OPERATION_ACCOUNT_UPDATE",
						label: "编辑账号"
					}
				]
			},
			{
				value: "OPERATION_LOG",
				label: "日志管理",
				children: [
					{
						value: "OPERATION_LOG_QUERY",
						label: "日志查询"
					}
				]
			}
		]
	}
];
import { getList } from "@/services/api/module/system/menu";

const DataScopeForm: React.FC<DataScopeFormProps> = props => {
	const { deptCheckedKeys, open, onCancel = () => {} } = props;
	const [dataScopeType, setDataScopeType] = useState<string | undefined>("1");
	const [loading, setLoading] = useState<boolean>(true);
	const [deptIds, setDeptIds] = useState<string[] | { checked: string[]; halfChecked: string[] }>([]);
	const [deptTree, setDeptTree] = useState([]);
	const [deptTreeExpandKey, setDeptTreeExpandKey] = useState<Key[]>([]);
	const [checkStrictly, setCheckStrictly] = useState<boolean>(true);
	const [data, setData] = useState<any>([]);
	// 数据获取
	const setFormValue = (id: number) => {
		// role.getRole(id).then(res => {
		// 	// const { user, postIds, roleIds } = res.data;
		// 	form.setFieldsValue({
		// 		id: id,
		// 		roleName: res.data.roleName,
		// 		roleKey: res.data.roleKey,
		// 		roleSort: res.data.sort,
		// 		dataScope: res.data.dataScope
		// 		// status: res.data.status,
		// 		// remark: res.data.remark,
		// 	});
		// });
	};
	useEffect(() => {
		getMenuTree();
	}, []);
	// 获取树菜单
	const getMenuTree = () => {
		// role.getDeptTreeByRole(id).then(res => {
		// 	console.log(res);
		// 	setDeptTree(res.depts);
		// });
		getList().then((data: any) => {
			setData(data?.data);
		});
	};

	// const fetchOrgList = async () => {
	// 	// const hide = message.loading('正在查询');
	// 	setLoading(true);
	// 	try {
	// 		await organize.getList().then((res: any) => {
	// 			setDeptTree(res.data);
	// 			setLoading(false);

	// 			// const exKeys = [];
	// 			// exKeys.push('1');
	// 			// setTreeData(res.data);
	// 			// exKeys.push(res.data[0].children[0].id);
	// 			// setExpandedKeys(exKeys);
	// 			// props.onSelect(res[0].children[0]);
	// 		});
	// 		// return true;
	// 	} catch (error) {
	// 		setLoading(false);
	// 		// return false;
	// 	}
	// };

	const handleCancel = () => {
		onCancel();
	};
	const handleFinish = async (values: Record<string, any>) => {
		props.onSubmit({ ...values, deptIds } as FormValueType);
	};

	const [lastColumnMerged, setLastColumnMerged] = React.useState(true);
	const [halfToChecked, setHalfToChecked] = React.useState(false);

	const [value, setValue] = React.useState([]);

	const handleChange = (val: React.SetStateAction<string[]>) => {
		console.log(val);
		setValue(val);
	};

	return (
		<Modal
			// placement="bottom"
			// height={"100%"}
			width={"80%"}
			title={"数据权限"}
			open={open}
			destroyOnClose={true}
			onCancel={handleCancel}
			// onFinish={handleFinish}
		>
			{/* <Row gutter={10}> */}
			{/* <Col span={6}> */}
			{/* <Card bordered>123</Card> */}
			{/* <List
						bordered
						dataSource={[
							{ name: "系统设置", icon: "icon-xitongshezhi" },
							{ name: "可视化门户", icon: "icon-biaozhunsheji" },
							{ name: "租户管理", icon: "icon-kaitongzuhu" }
						]}
						renderItem={item => (
							<List.Item>
								<List.Item.Meta avatar={<IconFont type={item?.icon} style={{ fontSize: 20 }} />} title={<>{item.name}</>} />
							</List.Item>
						)}
					/> */}
			{/* <Card bordered styles={{ body: { padding: "0px 10px" } }}>
						<List
							dataSource={[
								{ name: "系统设置", icon: "icon-xitongshezhi" },
								{ name: "可视化门户", icon: "icon-biaozhunsheji" },
								{ name: "租户管理", icon: "icon-kaitongzuhu" }
							]}
							renderItem={item => (
								<List.Item>
									<List.Item.Meta
										// avatar={<Radio value={1}></Radio>}
										title={
											<Radio value={1}>
												<Space>
													<IconFont type={item?.icon} style={{ fontSize: 20 }} />
													{item.name}
												</Space>
											</Radio>
										}
									/>
								</List.Item>
							)}
						/>
					</Card> */}
			{/*  */}
			{/* </Col> */}
			{/* <Col span={18}> */}
			<TreeTableList
				onChange={vals => {
					console.log("vals", vals);
				}}
				// size="small"
				fieldNames={{ label: "menuName", value: "id", children: "children" }}
				treeData={data}
				lastColumnMerged
				columns={[{ title: "目录" }, { title: "菜单" }, { title: "按钮" }]}
			/>
			{/* </Col>
			</Row> */}
		</Modal>
	);
};

export default DataScopeForm;
